<template>
    <div @click="div">
        <a @click="fn" href="https://www.bilibili.com">去bilbil</a><br>
        <a @click="fn2(100, $event)" href="https://www.bilibili.com">去bilbil</a><br>
        <a @click.stop.prevent="fn3" href="https://www.bilibili.com">去bilbil</a><br>
        <a @click.prevent href="https://www.bilibili.com">去bilbil</a><br>
        <button @click.stop="btn">点我阻止冒泡</button>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },

    methods: {
        fn(e) {
           
            console.log('做一些事情, 不要去b站了')
            e.preventDefault()
        },
        fn2(num, e) {
         
            console.log(num)
            e.preventDefault()
        },
        fn3() {
         
            console.log('我要做事情')
        },
        btn() {
            console.log('按钮被点了')
           
        },
        div() {
            console.log('div 被点了')
        }
    }
}
</script>

<style>

</style>